<template>
  <button :class="['button','button-'+type,'button-'+size]"
       :style="{background:color,fontSize:font/2+'px'}"
       @click="handleClick"
       :formType="formType"
  >
    {{title}}
  </button>
</template>

<script>
export default {
  name: 'mp-button',
  props: {
    disabled: Boolean,
    size: {
      type: String,
      default: 'normal',
      validator (value) {
        return [
          'small',
          'normal',
          'large'
        ].indexOf(value) > -1
      }
    },

    color: {
      type: String,
      default: '#22B1FF'

    },
    formType: {
      type: String,
      default: '',
      validator (value) {
        return [
          'submit',
          'reset'
        ].indexOf(value) > -1
      }
    },
    type: {
      type: String,
      default: 'default',
      validator (value) {
        return [
          'default',
          'danger',
          'primary'
        ].indexOf(value) > -1
      }
    },
    title: {
      type: String,
      default: '按钮'
    },
    font: {
      type: String,
      default: '30'
    }

  },
  methods: {
    handleClick (e) {
      this.$emit('btnClick')
    }

  }
}
</script>
<style lang='scss' scoped>
@import '@/common/scss/base.scss';
.button {
  position: relative;

}

.button-large {
  @include wh(641, 83);
  margin: auto;
  border-radius: 5px;
  color: #fff;
  @include fjc(center);
}
.button-default {
  background: $primaryColor;

}
</style>
